/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, BlobInputList, useTheme,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, useItemInputControl,
} from "../common/base";
import {useMeasureInpFilter} from "../common/hooks";
import {Each_ZdSetting, useTableEditor} from "../hook/useRepTableEditor";

interface Props  extends InternalItemProps{
    label?: string;
    nos?: string;
    titles?: any[];    //可能是Node[]，不一定纯粹string;  可变的多个标题编码的。
    zjuse?: number;     //最末尾的注释的文本使用那一段话？可选择办法的。
    config?: any[];    //有配置模式的 : 表对象的默认取值；
}
//这里第三个name参数：实际就是表格的嵌套属性字段。
const cb项目输入= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <BlobInputList value={(inp?.[name]) || ''} rows={3} datalist={['详见备注1', 'EW-Z-C，BW-J-d']}
                           onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
//通用表格组件的做法：第三个参数配置定长布局的px数，可以超过手机宽度，比如=430 px 也可行的。
export const config焊接资格=[
    ['焊工名字','n',60],['证件编号','z',166,],['项目代号','x',430,cb项目输入],['有效期','v',130],['焊工代号','H',80]
 ] as Each_ZdSetting[];
export const itemA焊接资格=['焊资表','焊资备注' ];
export const WeldingQualif=
    React.forwardRef(({ children, show ,alone=true,refWidth,label,nos}:Props,  ref
    ) => {
        const theme = useTheme();
        //因为useMeasureInpFilter(null,itemA附设装,);第三个参数带来的毛病 defvcbFunc ！
        const [getInpFilter]=useMeasureInpFilter(null,itemA焊接资格,);
        const {inp, setInp} = useItemInputControl({ ref });
        const headview=<Text variant="h5">
            {label}：
        </Text>;
        const [render]=useTableEditor({inp,setInp,
            headview, config: config焊接资格, table:'焊资表', });

        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={label!}>

                {render}
                备注：
                <BlobInputList value={inp?.焊资备注 || ''} rows={7} datalist={['备注1：GTAW-FeII-6G-3/60-Fefs-02/11/12和SMAW-FeII-6G(k)-3/60-Fef3J']}
                               onListChange={v => setInp({ ...inp, 焊资备注 :v || undefined}) } />
                { children }
            </InspectRecordLayout>
        );
    } );

const cb持证项输入= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <BlobInputList value={(inp?.[name]) || ''} rows={2} datalist={['RT-Ⅱ', 'RT-Ⅲ']}
                           onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
const cb有效期输入= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <BlobInputList value={(inp?.[name]) || ''} rows={2} datalist={['2022年07月至2027年06月']}
                           onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
export const config无损资格=[
    ['姓名','n',70],['证书编号','z',172,],['持证项目','x',290,cb持证项输入],['有效期','v',195,cb有效期输入]
] as Each_ZdSetting[];
export const itemA无损资格=['损资表','损资备注' ];
export const NonDestructive=
    React.forwardRef(({ children, show ,alone=true,refWidth,label,nos}:Props,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA无损资格,);
        const {inp, setInp} = useItemInputControl({ ref });
        const headview=<Text variant="h5">
            {label}：
        </Text>;
        const [render]=useTableEditor({inp,setInp,
            headview, config: config无损资格, table:'损资表', });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={label!}>
                {render}
                备注：
                <BlobInputList value={inp?.损资备注 || ''} rows={7} datalist={[]}
                               onListChange={v => setInp({ ...inp, 损资备注 :v || undefined}) } />
                { children }
            </InspectRecordLayout>
        );
    } );

